// SPDX-License-Identifier: MIT

@use "../settings/config" as cfg;
@use "../settings/effects";

// combo box
.color-picker {

  >.color-picker-label {
    -fx-padding: cfg.$padding-y cfg.$padding-x cfg.$padding-y cfg.$padding-x;

    >.label {
      -fx-text-fill: -color-fg-default;
    }

    >.picker-color {
      >.picker-color-rect {
        -fx-stroke: -color-border-default;
      }
    }
  }

  // ColorPicker.STYLE_CLASS_BUTTON
  &.button {
    >.color-picker-label {
      -fx-padding: 0;
    }
  }
}

// popup window
.color-palette {
  -fx-background-color: -color-border-default, -color-bg-default;
  -fx-background-insets: 0, cfg.$border-width;
  -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
  -fx-spacing: 10px;
  -fx-padding: 1em;
  @include effects.shadow(-color-shadow-default, cfg.$popup-shadow-radius, cfg.$popup-shadow-spread);

  >.color-picker-grid {
    -fx-padding: 0.5px;
    -fx-snap-to-pixel: false;

    >.color-square {
      -fx-background-color: transparent;
      -fx-padding: 0.5px;
    }
  }
}

// this is another popup window, it's not inside the .color-palette
// also note that it's applied to both palette dropdown popup AND
// each individual color hover popup
.color-palette-region {
  // color popup window positioning,
  // transparent is fit both light and dark modes
  -fx-effect: dropshadow(gaussian, transparent, 6, 0, 0, 8);

  // the color over which the user is hovering
  >.color-square.hover-square {
    -fx-background-color: -color-accent-fg, -color-bg-default;
    -fx-background-insets: -2, -1; // border width
    -fx-background-radius: 5, 0;
    -fx-scale-x: 1.5; // magnification
    -fx-scale-y: 1.5;
    -fx-border-color: -color-accent-fg;
    -fx-border-insets: -1, -1;
  }
}

///////////////////////////////////////////////////////////////////////////////
// CustomColorDialog                                                         //
///////////////////////////////////////////////////////////////////////////////

.custom-color-dialog {
  -fx-background-color: -color-bg-default;
  -fx-padding: 1.25em;
  -fx-spacing: 1.25em;

  >.color-rect-pane {
    -fx-spacing: 1em;
    -fx-pref-height: 16em;
    -fx-alignment: TOP-LEFT;
    -fx-fill-height: true;

    >.color-rect {
      -fx-min-width:  16em;
      -fx-min-height: 16em;

      .color-rect-border {
        -fx-border-color: -color-border-default;
      }

      #color-rect-indicator {
        -fx-background-color: none;
        -fx-border-color: white;  // circular indicator
        -fx-border-radius: 0.4166667em;
        -fx-pref-width:  0.833333em;
        -fx-pref-height: 0.833333em;
        -fx-translate-x: -0.4166667em;
        -fx-translate-y: -0.4166667em;
        -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
      }
    }

    >.color-bar {
      -fx-min-width:  1.666667em;
      -fx-min-height: 16.666667em;
      -fx-max-width:  1.666667em;
      -fx-border-color: -color-border-default;

      #color-bar-indicator {
        -fx-border-radius: 0.333333em;
        -fx-border-color:  white; // rect indicator
        -fx-pref-width:  2em;
        -fx-pref-height: 0.833333em;
        -fx-translate-x: -0.1666667em;
        -fx-translate-y: -0.4166667em;
        -fx-effect: dropshadow(three-pass-box, black, 2, 0.0, 0, 1);
      }
    }
  }

  >.controls-pane {
    >.current-new-color-grid {
      >.label {
        -fx-padding: 0 0 0 calc(cfg.$border-width * 2);
      }

      >#current-new-color-border {
        -fx-border-color: -color-border-default;
        -fx-border-width: cfg.$border-width;
      }

      >.color-rect {
        -fx-min-width:  10em;
        -fx-pref-width: 10em;

        -fx-min-height:  1.75em;
        -fx-pref-height: 1.75em;
      }

      // top spacer (between labels and color rect)
      >#spacer1 {
        -fx-min-height:  5px;
        -fx-pref-height: 5px;
        -fx-max-height:  5px;
      }

      // bottom spacer (between color rect and settings pane)
      >#spacer2 {
        -fx-min-height:  1em;
        -fx-pref-height: 1em;
        -fx-max-height:  1em;
      }
    }

    #settings-pane {
      -fx-hgap: 6px;
      -fx-vgap: 6px;

      >.customcolor-controls-background {
        -fx-background-color: -color-border-default, -color-bg-default;
        -fx-background-insets: calc(14px - cfg.$border-width) 0 calc(6px - cfg.$border-width) 0,
                               14px cfg.$border-width 6px cfg.$border-width;
        -fx-background-radius: cfg.$border-radius, cfg.$inner-border-radius;
      }

      >.settings-label {
        -fx-min-width: 5.75em;
      }

      >.settings-unit {
        -fx-min-width:  1.5em;
        -fx-pref-width: 1.5em;
        -fx-max-width:  1.5em;
      }

      >.slider {
        -fx-pref-width: 10em;
      }

      >.color-input-field {
        -fx-max-width:  4em;
        -fx-pref-width: 4em;
        -fx-min-width:  4em;
        -fx-pref-column-count: 3;
      }

      >#spacer-side {
        -fx-min-width:  0.5em;
        -fx-pref-width: 0.5em;
      }

      >#spacer-bottom {
        -fx-min-height:  1em;
        -fx-pref-height: 1em;
      }

      >.web-field {
        -fx-pref-column-count: 6;
        -fx-pref-width: 8em;
      }

      // keeps the text right-aligned when in RTL mode
      >.webcolor-field:dir(rtl)>.text-field:dir(ltr) {
        -fx-alignment: BASELINE_RIGHT;
      }
    }

    >#buttons-hbox {
      -fx-spacing: 10px;
      -fx-padding: 1em 0 0 0;
      -fx-alignment: BOTTOM_RIGHT;
    }

    .transparent-pattern {
      -fx-background-image: url("");
      -fx-background-repeat: repeat;
      -fx-background-size: auto;
    }
  }
}
